<template>
    <view class="contanier">
        <view class="top">
            <view class="search-container">
                <CustomSearch :goSearch="goSearch" :value="placeholder"></CustomSearch>
            </view>
            <SwipeNavBar :tabBars="tabBars" :width="15" :currentIndex="currentIndex" @changeIndex="handleChange"
                @changeTab="handleChange" :scrollH="scrollH" :swiperList="swiperList">
                <template v-for="(item, index) in 2" :key="index" v-slot:swiper-item="{ item, index }">
                    <!-- 全部 -->
                    <view v-if="index === 0">
                        <Empty v-if="!postSearchRes || postSearchRes.length == 0"></Empty>
                        <PostCard v-for="(item, index) in postSearchRes" :key="index" :item="item" />
                    </view>
                    <!-- 八股 -->
                    <view v-if="index === 1">
                        <Empty v-if="!interviewSearchRes || interviewSearchRes.length == 0"></Empty>

                        <InterviewCard v-for="(item, index) in interviewSearchRes" :key="index" :item="item">
                        </InterviewCard>
                    </view>
                </template>
            </SwipeNavBar>
        </view>
    </view>
</template>

<script setup lang="ts">
import Empty from '@/components/Empty.vue';
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import InterviewCard from '@/components/InterviewCard.vue'
import CustomSearch from '@/components/CustomSearch.vue';
import SwipeNavBar from '@/components/SwipeNavBar.vue';
import PostCard from '@/components/PostCard.vue';
import { API_articleSearch, API_integratedQuestionSearch } from '@/service/home';
import type { DetailArticle } from '@/type/article'
import type { interviewItem } from '@/type/interview'
const swiperList = [1, 1];
let currentIndex = ref<number>(-1);
let scrollH = 0;
//navigator传进来的参数
let params = ref<number>(0);
const placeholder = ref<string>("");
const handleChange = (index: number) => {
    currentIndex.value = index;
    if (index == 0) {
        searchArticle(placeholder.value);
    } else {
        searchInterview();
    }
}

// // 八股搜索
// const integratedQuestionSearch = async () => {
// 	const res = await API_integratedQuestionSearch(searchVal.value, 0);
// 	swiperList.value = res.data ? res.data : [];
// }

// const handleChange = async (index: number) => {
//     currentIndex.value = index;
// 	switch (index){
// 		case 0:
// 			await articleSearch();
// 			break;
// 		case 1:
// 			await integratedQuestionSearch();
// 			break;
// 	}

// 	addHistorySearch();
// }

// const addHistorySearch = () => {
// 	let history_search = uni.getStorageSync('history_search') ? uni.getStorageSync('history_search') : [];
// 	history_search = history_search.filter(item => item !== searchVal.value);
// 	uni.setStorageSync('history_search', [searchVal.value, ...history_search]);
// }


// const getSearchResult = async () => {
// 	await articleSearch();
// }

onMounted(() => {
    uni.getSystemInfo({
        success: (e) => {
            scrollH = e.windowHeight - uni.upx2px(60);
        }
    })
    // currentIndex.value = params.value ? Number(params.value) : 0;
})
//搜索帖子
const postSearchRes = ref<DetailArticle[]>([]);
// 搜索八股
const interviewSearchRes = ref<interviewItem[]>([]);

const searchArticle = async (val: string) => {
    let res = await API_articleSearch(val, 1);
    if (res.code == 1) {
        postSearchRes.value = res.data;
    }
}
const searchInterview = async () => {
    let res = await API_integratedQuestionSearch(placeholder.value, 1);
    if (res.code == 1) {
        interviewSearchRes.value = res.data;
    }
}
onLoad((options) => {
    placeholder.value = options?.input;
    searchArticle(placeholder.value);
})
const tabBars =
    [
        { id: 1, name: '帖子' },
        { id: 2, name: '八股' },
    ]
const goSearch = () => {
    uni.navigateTo({ url: '/index_modules/search/search' })
}

</script>

<style scoped lang="scss">
.contanier {

    .top {
        .search-container {
            margin-top: 20rpx;
            /* 添加的上边距 */
        }

        .topic {
            border-radius: 50rpx 50rpx 0 0;
            background-color: #fff;
            margin-top: 30rpx;

            .header {
                margin: 30rpx;
                padding: 30rpx;

                .title {
                    font-size: 40rpx;
                    color: $color-main;
                }

                .msg {
                    margin-top: 15rpx;
                    font-size: 30rpx;
                    color: $color-title;
                }

            }
        }
    }
}
</style>
